<template>
  <div class="class-time">
    <a-time-picker format="HH:mm" :value="startMoment" placeholder="开始时间" @change="onStartChange" />
    -
    <a-time-picker format="HH:mm" :value="endMoment" placeholder="结束时间" @change="onEndChange" />
  </div>
</template>

<script>
import moment from 'moment'
  export default {
    props: {
      value: {
        type: String
      }
    },

    data() {
      return {
        start: '',
        end: '',
        startMoment: null,
        endMoment: null
      }
    },

    watch: {
      start(val) {
        this.change()
      },

      end(val) {
        this.change()
      },

      value(val) {
        if(val) {
          let [ start, end ] = val.split('-')
          this.start = start
          this.end = end

          const startArr = start.split(':')
          const endArr = end.split(':')

          if(startArr.length >= 2) {
            this.startMoment = moment().hour(startArr[0]).minute(startArr[1])
          }else {
            this.startMoment = null
          }

          if(endArr.length >= 2) {
            this.endMoment = moment().hour(endArr[0]).minute(endArr[1])
          }else {
            this.endMoment = null
          }
        }
      }
    },

    methods: {
      onStartChange(time, timeStr) {
        this.start = timeStr
        if(timeStr) {
          this.startMoment = this.getMoment(timeStr)
        }else {
          this.startMoment = null
        }
      },

      onEndChange(time, timeStr) {
        this.end = timeStr
        if(timeStr) {
          this.endMoment = this.getMoment(timeStr)
        }else{
          this.endMoment = null
        }
      },

      getMoment(timeStr) {
        const timeArr = timeStr.split(':')
        return moment().hour(timeArr[0]).minute(timeArr[1])
      },

      change() {
        if(this.start && this.end) {
          this.$emit('change', `${this.start}-${this.end}`)
        }else{
          this.$emit('change', ``)
        }
      },

      reset() {
        this.startMoment = null
        this.endMoment = null
        this.start = ''
        this.end = ''
      }
    }
  }
</script>

<style lang="less" scoped>

</style>